<template>
  <el-dialog
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :modelValue="modelValue"
    @update:model-value="emits('update:modelValue', $event)"
    :title="title"
    width="500">
    <el-form>
      <el-form-item label="组" :label-width="120">
        <el-input v-model="group" autocomplete="off" />
      </el-form-item>
      <el-form-item label="名称" :label-width="120">
        <el-input v-model="name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <div flex justify-end>
      <el-button :disable="recording" @click="record()" :icon="ElIconVideoCamera" type="primary" plain>
        {{ recording ? '录制中' : (
          xy.x === 0 && xy.y === 0 ? '录制' : '重新录制'
        ) }}
      </el-button>
      <el-button v-if="xy.x !==0 || xy.y !== 0" @click="onMove(xy)" :icon="ElIconPosition" type="success" plain>移动</el-button>
    </div>
    <template #footer>
      <div class="dialog-footer" flex>
        <el-button mr-auto @click="onDelete()" type="danger">删除</el-button>
        <el-button @click="emits('update:modelValue', false)">取消</el-button>
        <el-button type="primary" @click="confirm()">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { MathPoint } from '~/models/Math/MathPoint';
import { oProject } from '~/models/Project';
import { defaultTaskManager } from '~/models/Task/TaskManager';

const props = defineProps<{
  modelValue: boolean,
  point: TGData,
}>()
// const editingPoint = ref(new GamePoint())
const group = ref('')
const name = ref('')
const xy = ref(new MathPoint())
const emits = defineEmits<{
  (e: 'update:modelValue', item: boolean): void
  (e: 'confirm', item: void): void
  (e: 'delete', item: void): void
}>()

watch(() => props.modelValue, val => {
  
  if (val) {
    console.log('update', val);
    const arr = props.point.name.split('.')
    if(arr.length === 1) {
      group.value = ''
      name.value = arr[0]
    }
    else {
      group.value = arr[0]
      name.value = arr[1]
    }
    const inner = props.point.initial
    xy.value.x = inner.x
    xy.value.y = inner.y
  }
}, {
  immediate: true
})

function confirm() {
  if (name.value === '' || group.value.indexOf('_') >=0 || name.value.indexOf('_') >=0) {
    return
  }
  const _name = group.value === '' ? name.value : `${group.value}_${name.value}`
  props.point.name = _name
  props.point.title = _name
  props.point.initial.x = xy.value.x
  props.point.initial.y = xy.value.y

  emits('update:modelValue', false)
  emits('confirm')
}

const title = computed(() => {
  return props.point.name === '' ? '新位置' : '编辑位置'
})

function onDelete() {
  emits('update:modelValue', false)
  emits('delete')
}

const recording = ref(false)
async function record() {
  recording.value = true
  // target_title
  const codePre = `target_title = "${oProject.value.gameTitle}"\n`
  const code = await loadCode('screen_record')

  const points = await defaultTaskManager.value.exec(codePre + code)

  if (points.length) {
    xy.value.x = points[0].x
    xy.value.y = points[0].y
  }
  recording.value = false
}

async function onMove(point: MathPoint) {
  // target_title
  const codePre = `\
target_title = "${oProject.value.gameTitle}"
x = ${point.x}
y = ${point.y}
`
  const code = await loadCode('screen_move_to')
  defaultTaskManager.value.exec(codePre + code, true)
}
</script>